<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>车辆地图管理系统</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f7fa;
            color: #333;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        h1 {
            text-align: center;
            font-size: 2rem;
            margin-bottom: 10px;
        }

        .subtitle {
            text-align: center;
            opacity: 0.9;
        }

        .dashboard {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }

        .card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            flex: 1;
        }

        .card h2 {
            color: #667eea;
            margin-bottom: 15px;
            border-bottom: 2px solid #f0f0f0;
            padding-bottom: 10px;
        }

        .stats {
            display: flex;
            justify-content: space-around;
            text-align: center;
            flex-wrap: wrap;
        }

        .stat-item {
            padding: 10px;
            min-width: 100px;
        }

        .stat-value {
            font-size: 2rem;
            font-weight: bold;
            color: #764ba2;
        }

        .stat-label {
            color: #666;
            font-size: 0.9rem;
        }

        .content {
            display: flex;
            gap: 20px;
        }

        .map-section {
            flex: 3;
        }

        .list-section {
            flex: 1;
        }

        #map {
            height: 600px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            z-index: 1;
            position: relative;
        }

        .station-label {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: transparent;
            border: none;
        }
        
        .route-number-label {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: transparent;
            border: none;
            font-weight: bold;
        }
        
        .route-header {
            font-weight: bold;
            background-color: #f8f9fa;
            padding: 8px 12px;
            border-radius: 6px;
            margin-bottom: 8px;
        }

        .vehicle-list {
            max-height: 600px;
            overflow-y: auto;
        }

        .list-group-item {
            padding: 15px;
            border: 1px solid #eee;
            border-radius: 5px;
            margin-bottom: 10px;
            background: white;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .list-group-item:hover {
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transform: translateY(-2px);
            border-color: #667eea;
        }

        .list-group-item.active {
            border-color: #667eea;
            background-color: #f8f9ff;
        }

        .item-title {
            font-weight: bold;
            color: #333;
            margin-bottom: 5px;
        }

        .item-details {
            font-size: 0.9rem;
            color: #666;
        }

        .status-badge {
            padding: 3px 8px;
            border-radius: 12px;
            font-size: 0.8rem;
            font-weight: bold;
        }

        .status-active {
            background-color: #d4edda;
            color: #155724;
        }

        .status-inactive {
            background-color: #f8d7da;
            color: #721c24;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }

        .form-control {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 1rem;
            transition: border-color 0.3s, box-shadow 0.3s;
        }
        
        .form-control:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
            outline: none;
        }

        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1rem;
            transition: background-color 0.3s;
        }

        .btn-primary {
            background-color: #667eea;
            color: white;
        }

        .btn-primary:hover {
            background-color: #5a6fd8;
        }

        .btn-success {
            background-color: #28a745;
            color: white;
        }

        .btn-success:hover {
            background-color: #218838;
        }

        .btn-block {
            display: block;
            width: 100%;
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
        }

        .modal-content {
            background-color: white;
            margin: 10% auto;
            padding: 25px;
            border-radius: 12px;
            width: 50%;
            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);
            position: relative;
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }

        .close {
            font-size: 1.8rem;
            cursor: pointer;
            color: #999;
            transition: color 0.2s;
        }
        
        .close:hover {
            color: #333;
        }

        .tabs {
            display: flex;
            margin-bottom: 15px;
            border-bottom: 1px solid #eee;
        }

        .tab {
            padding: 10px 20px;
            cursor: pointer;
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-bottom: none;
            border-radius: 5px 5px 0 0;
            margin-right: 5px;
        }

        .tab.active {
            background: white;
            border-bottom: 1px solid white;
            margin-bottom: -1px;
            font-weight: bold;
            color: #667eea;
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        .search-box {
            margin-bottom: 15px;
        }

        footer {
            text-align: center;
            margin-top: 30px;
            padding: 20px;
            color: #666;
            font-size: 0.9rem;
        }

        @media (max-width: 768px) {
            .content {
                flex-direction: column;
            }
            
            .modal-content {
                width: 90%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>车辆地图管理系统</h1>
            <p class="subtitle">实时监控和管理您的车辆位置信息</p>
        </header>

        <div class="dashboard">
            <div class="card">
                <h2>系统概览</h2>
                <div class="stats">
                    <div class="stat-item">
                        <div class="stat-value" id="total-vehicles">0</div>
                        <div class="stat-label">总车辆数</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value" id="active-vehicles">0</div>
                        <div class="stat-label">运营中</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value" id="available-vehicles">0</div>
                        <div class="stat-label">可用车辆</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value" id="total-routes">0</div>
                        <div class="stat-label">总线路数</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-value" id="active-routes">0</div>
                        <div class="stat-label">运营线路</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="content">
            <div class="map-section">
                <div class="card">
                    <h2>车辆分布地图</h2>
                    <div id="map"></div>
                    <!-- 线路图例 -->
                    <div id="route-legend" style="
                        position: absolute;
                        bottom: 20px;
                        left: 20px;
                        background: rgba(255, 255, 255, 0.95);
                        padding: 15px;
                        border-radius: 10px;
                        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
                        z-index: 1000;
                        max-height: 300px;
                        overflow-y: auto;
                        backdrop-filter: blur(5px);
                        border: 1px solid #eee;
                    ">
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                            <h4 style="margin: 0; color: #333; font-size: 16px;">线路图例</h4>
                            <button id="toggle-legend" style="
                                background: #667eea;
                                border: none;
                                cursor: pointer;
                                font-size: 16px;
                                color: white;
                                width: 24px;
                                height: 24px;
                                border-radius: 50%;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                            ">−</button>
                        </div>
                        <div id="legend-content"></div>
                    </div>
                </div>
            </div>

            <div class="list-section">
                <div class="card">
                    <div class="tabs">
                        <div class="tab active" data-tab="vehicles">车辆列表</div>
                        <div class="tab" data-tab="routes">线路列表</div>
                        <div class="tab" data-tab="stations">站点列表</div>
                    </div>

                    <div class="tab-content active" id="vehicles-tab">
                        <div class="search-box">
                            <input type="text" class="form-control" placeholder="搜索车辆..." id="vehicle-search">
                        </div>
                        <div class="vehicle-list" id="vehicles-list">
                            <!-- 车辆列表将通过JavaScript动态生成 -->
                        </div>
                    </div>

                    <div class="tab-content" id="routes-tab">
                        <div class="search-box">
                            <input type="text" class="form-control" placeholder="搜索线路..." id="route-search">
                        </div>
                        <div class="vehicle-list" id="routes-list">
                            <!-- 线路列表将通过JavaScript动态生成 -->
                        </div>
                    </div>

                    <div class="tab-content" id="stations-tab">
                        <div class="search-box">
                            <input type="text" class="form-control" placeholder="搜索站点..." id="station-search">
                        </div>
                        <div class="vehicle-list" id="stations-list">
                            <!-- 站点列表将通过JavaScript动态生成 -->
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div id="vehicle-modal" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <h2>车辆详情</h2>
                    <span class="close">&times;</span>
                </div>
                <div id="vehicle-details">
                    <!-- 车辆详情将通过JavaScript动态生成 -->
                </div>
            </div>
        </div>

        <footer>
            <p>© 2025 车辆地图管理系统 - 实时监控和管理平台</p>
        </footer>
    </div>

    <script>
        // 初始化地图，设置默认中心点和缩放级别
        const map = L.map('map').setView([39.9042, 116.4074], 12);

        // 添加OpenStreetMap图层
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        // 模拟车辆数据 - 实际项目中应从后端API获取
        const mockVehicles = [
            {
                id: 1,
                license_plate: "京A12345",
                brand: "比亚迪",
                model: "汉EV",
                city_id: 1,
                level_id: 1,
                model_id: 1,
                vin_code: "VIN1234567890",
                device_id: 1001,
                status: 1,
                latitude: 39.9042,
                longitude: 116.4074,
                last_updated: "2025-09-25 10:30:00"
            },
            {
                id: 2,
                license_plate: "京B67890",
                brand: "特斯拉",
                model: "Model 3",
                city_id: 1,
                level_id: 2,
                model_id: 2,
                vin_code: "VIN0987654321",
                device_id: 1002,
                status: 1,
                latitude: 39.9100,
                longitude: 116.4100,
                last_updated: "2025-09-25 10:25:00"
            },
            {
                id: 3,
                license_plate: "京C11111",
                brand: "蔚来",
                model: "ES6",
                city_id: 1,
                level_id: 1,
                model_id: 3,
                vin_code: "VIN1111111111",
                device_id: 1003,
                status: 0,
                latitude: 39.9200,
                longitude: 116.4200,
                last_updated: "2025-09-25 09:15:00"
            },
            {
                id: 4,
                license_plate: "京D22222",
                brand: "小鹏",
                model: "P7",
                city_id: 1,
                level_id: 2,
                model_id: 4,
                vin_code: "VIN2222222222",
                device_id: 1004,
                status: 1,
                latitude: 39.8900,
                longitude: 116.3900,
                last_updated: "2025-09-25 10:40:00"
            },
            {
                id: 5,
                license_plate: "京E33333",
                brand: "理想",
                model: "ONE",
                city_id: 1,
                level_id: 1,
                model_id: 5,
                vin_code: "VIN3333333333",
                device_id: 1005,
                status: 1,
                latitude: 39.9300,
                longitude: 116.4300,
                last_updated: "2025-09-25 10:35:00"
            },
            {
                id: 6,
                license_plate: "京F44444",
                brand: "奔驰",
                model: "EQC",
                city_id: 1,
                level_id: 2,
                model_id: 6,
                vin_code: "VIN4444444444",
                device_id: 1006,
                status: 1,
                latitude: 39.9400,
                longitude: 116.4000,
                last_updated: "2025-09-25 11:00:00"
            },
            {
                id: 7,
                license_plate: "京G55555",
                brand: "宝马",
                model: "iX3",
                city_id: 1,
                level_id: 1,
                model_id: 7,
                vin_code: "VIN5555555555",
                device_id: 1007,
                status: 1,
                latitude: 39.9500,
                longitude: 116.4100,
                last_updated: "2025-09-25 11:15:00"
            },
            {
                id: 8,
                license_plate: "京H66666",
                brand: "奥迪",
                model: "e-tron",
                city_id: 1,
                level_id: 2,
                model_id: 8,
                vin_code: "VIN6666666666",
                device_id: 1008,
                status: 0,
                latitude: 39.8900,
                longitude: 116.4300,
                last_updated: "2025-09-25 10:50:00"
            },
            {
                id: 9,
                license_plate: "京J77777",
                brand: "沃尔沃",
                model: "XC40",
                city_id: 1,
                level_id: 1,
                model_id: 9,
                vin_code: "VIN7777777777",
                device_id: 1009,
                status: 1,
                latitude: 39.9350,
                longitude: 116.3950,
                last_updated: "2025-09-25 11:30:00"
            },
            {
                id: 10,
                license_plate: "京K88888",
                brand: "大众",
                model: "ID.4",
                city_id: 1,
                level_id: 2,
                model_id: 10,
                vin_code: "VIN8888888888",
                device_id: 1010,
                status: 1,
                latitude: 39.9600,
                longitude: 116.4200,
                last_updated: "2025-09-25 11:45:00"
            }
        ];

        // 存储地图标记
        const markers = {};

        // 存储线路图层和颜色
        const routeLayers = {};
        const routeColors = {};

        // 模拟线路数据 - 实际项目中应从后端API获取
        const mockRoutes = [
            {
                id: 1,
                name: "机场专线",
                code: "AIR001",
                startPoint: "市中心广场",
                endPoint: "国际机场",
                tags: "机场,快速",
                status: 1,
                stations: [
                    { name: "市中心广场", lat: 39.9042, lng: 116.4074 },
                    { name: "火车站", lat: 39.9000, lng: 116.4100 },
                    { name: "商业区", lat: 39.8900, lng: 116.4200 },
                    { name: "国际机场", lat: 39.8800, lng: 116.4300 }
                ]
            },
            {
                id: 2,
                name: "地铁接驳线",
                code: "SUB002",
                startPoint: "地铁站A",
                endPoint: "工业园区",
                tags: "地铁,园区",
                status: 1,
                stations: [
                    { name: "地铁站A", lat: 39.9100, lng: 116.4000 },
                    { name: "购物中心", lat: 39.9150, lng: 116.4050 },
                    { name: "理工大学", lat: 39.9200, lng: 116.4100 },
                    { name: "工业园区", lat: 39.9250, lng: 116.4150 }
                ]
            },
            {
                id: 3,
                name: "景区环线",
                code: "TOU003",
                startPoint: "游客中心",
                endPoint: "游客中心",
                tags: "旅游,环线",
                status: 1,
                stations: [
                    { name: "游客中心", lat: 39.9300, lng: 116.3900 },
                    { name: "历史博物馆", lat: 39.9350, lng: 116.3950 },
                    { name: "中央公园", lat: 39.9400, lng: 116.4000 },
                    { name: "古镇风貌区", lat: 39.9450, lng: 116.4050 },
                    { name: "游客中心", lat: 39.9300, lng: 116.3900 }
                ]
            },
            {
                id: 4,
                name: "商务快线",
                code: "BUS004",
                startPoint: "金融区",
                endPoint: "高新园区",
                tags: "商务,快速",
                status: 1,
                stations: [
                    { name: "金融商务区", lat: 39.9500, lng: 116.4100 },
                    { name: "市政府", lat: 39.9550, lng: 116.4150 },
                    { name: "高新技术园", lat: 39.9600, lng: 116.4200 }
                ]
            },
            {
                id: 5,
                name: "夜间专线",
                code: "NIG005",
                startPoint: "夜市",
                endPoint: "大学城",
                tags: "夜间,学生",
                status: 0,
                stations: [
                    { name: "特色夜市", lat: 39.8900, lng: 116.4300 },
                    { name: "市中心医院", lat: 39.8950, lng: 116.4250 },
                    { name: "师范大学", lat: 39.9000, lng: 116.4200 }
                ]
            }
        ];

        // 初始化统计信息
        document.getElementById('total-vehicles').textContent = mockVehicles.length;
        document.getElementById('active-vehicles').textContent = mockVehicles.filter(v => v.status === 1).length;
        document.getElementById('available-vehicles').textContent = mockVehicles.filter(v => v.status === 1).length;
        document.getElementById('total-routes').textContent = mockRoutes.length;
        document.getElementById('active-routes').textContent = mockRoutes.filter(r => r.status === 1).length;

        // 渲染车辆列表
        function renderVehicles(vehicles) {
            const vehiclesList = document.getElementById('vehicles-list');
            vehiclesList.innerHTML = '';
            
            vehicles.forEach(vehicle => {
                const statusClass = vehicle.status === 1 ? 'status-active' : 'status-inactive';
                const statusText = vehicle.status === 1 ? '运营中' : '停运';
                
                const vehicleElement = document.createElement('div');
                vehicleElement.className = 'list-group-item';
                vehicleElement.setAttribute('data-vehicle-id', vehicle.id);
                vehicleElement.innerHTML = `
                    <div style="display: flex; align-items: center; justify-content: space-between;">
                        <div>
                            <div style="font-weight: bold; font-size: 16px;">${vehicle.license_plate}</div>
                            <div style="font-size: 14px; color: #666;">${vehicle.brand} ${vehicle.model}</div>
                        </div>
                        <span class="status-badge ${statusClass}" style="font-size: 12px;">${statusText}</span>
                    </div>
                    <div class="item-details" style="margin-top: 8px; display: flex; justify-content: space-between;">
                        <div>
                            <span style="color: #666;">设备ID:</span> 
                            <span>${vehicle.device_id}</span>
                        </div>
                        <div style="font-size: 12px;">
                            ${vehicle.last_updated}
                        </div>
                    </div>
                    <div class="item-details" style="margin-top: 5px;">
                        <span style="color: #666;">VIN:</span> 
                        <span style="font-family: monospace; font-size: 12px;">${vehicle.vin_code}</span>
                    </div>
                `;
                
                vehicleElement.addEventListener('click', () => {
                    showVehicleDetails(vehicle);
                    highlightVehicleOnMap(vehicle.id);
                });
                vehiclesList.appendChild(vehicleElement);
            });
        }

        // 渲染线路列表
        function renderRoutes(routes) {
            const routesList = document.getElementById('routes-list');
            routesList.innerHTML = '';
            
            // 定义线路颜色
            const colors = ['#667eea', '#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4'];
            
            routes.forEach(route => {
                const statusClass = route.status === 1 ? 'status-active' : 'status-inactive';
                const statusText = route.status === 1 ? '运营中' : '停运';
                const routeColor = colors[(route.id - 1) % colors.length];
                
                const routeElement = document.createElement('div');
                routeElement.className = 'list-group-item';
                routeElement.setAttribute('data-route-id', route.id);
                routeElement.innerHTML = `
                    <div class="item-title" style="display: flex; align-items: center; justify-content: space-between;">
                        <div style="display: flex; align-items: center;">
                            <div style="
                                width: 24px;
                                height: 24px;
                                border-radius: 50%;
                                background-color: ${routeColor};
                                margin-right: 10px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                color: white;
                                font-weight: bold;
                                font-size: 12px;
                                flex-shrink: 0;
                            ">${route.id}</div>
                            <div>
                                <div style="font-weight: bold;">${route.name}</div>
                                <div style="font-size: 12px; color: #666;">${route.code}</div>
                            </div>
                        </div>
                        <span class="status-badge ${statusClass}" style="font-size: 12px;">${statusText}</span>
                    </div>
                    <div class="item-details" style="margin-top: 8px; display: flex; justify-content: space-between; align-items: center;">
                        <div>
                            <span style="color: #666;">起终点:</span> 
                            <span>${route.startPoint} → ${route.endPoint}</span>
                        </div>
                        <div style="font-size: 12px; background: #f1f1f1; padding: 2px 6px; border-radius: 4px;">
                            ${route.stations.length}个站点
                        </div>
                    </div>
                    <div class="item-details" style="margin-top: 5px;">
                        <span style="color: #666;">标签:</span> 
                        <span>${route.tags}</span>
                    </div>
                `;
                
                routeElement.addEventListener('click', () => {
                    showRouteDetails(route);
                    highlightRouteOnMap(route.id);
                });
                routesList.appendChild(routeElement);
            });
        }

        // 渲染站点列表
        function renderStations() {
            const stationsList = document.getElementById('stations-list');
            stationsList.innerHTML = '';
            
            // 定义线路颜色
            const colors = ['#667eea', '#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4'];
            
            // 遍历所有线路的站点
            mockRoutes.forEach(route => {
                const routeColor = colors[(route.id - 1) % colors.length];
                
                // 为每个线路添加标题
                const routeHeader = document.createElement('div');
                routeHeader.className = 'route-header';
                routeHeader.innerHTML = `
                    <div style="
                        display: flex;
                        align-items: center;
                        padding: 8px 12px;
                        background: #f8f9fa;
                        border-radius: 6px;
                        margin-bottom: 8px;
                        font-weight: bold;
                        color: #444;
                    ">
                        <div style="
                            width: 20px;
                            height: 20px;
                            border-radius: 50%;
                            background-color: ${routeColor};
                            margin-right: 8px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            color: white;
                            font-weight: bold;
                            font-size: 11px;
                            flex-shrink: 0;
                        ">${route.id}</div>
                        ${route.name}
                    </div>
                `;
                stationsList.appendChild(routeHeader);
                
                route.stations.forEach((station, index) => {
                    const stationElement = document.createElement('div');
                    stationElement.className = 'list-group-item';
                    stationElement.innerHTML = `
                        <div style="display: flex; align-items: center; justify-content: space-between;">
                            <div style="display: flex; align-items: center;">
                                <div style="
                                    width: 20px;
                                    height: 20px;
                                    border-radius: 50%;
                                    background-color: ${routeColor};
                                    margin-right: 10px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    color: white;
                                    font-weight: bold;
                                    font-size: 11px;
                                    flex-shrink: 0;
                                ">${route.id}</div>
                                <div>
                                    <div style="font-weight: bold;">${station.name}</div>
                                    <div style="font-size: 12px; color: #666;">第${index + 1}站</div>
                                </div>
                            </div>
                            <div style="font-size: 12px; background: #e9ecef; padding: 2px 6px; border-radius: 4px;">
                                ${route.code}
                            </div>
                        </div>
                    `;
                    
                    // 点击站点列表项时在地图上居中显示该站点位置
                    stationElement.addEventListener('click', () => {
                        // 居中显示站点位置
                        map.setView([station.lat, station.lng], 15);
                        
                        // 高亮显示对应的线路
                        highlightRouteOnMap(route.id);
                    });
                    stationsList.appendChild(stationElement);
                });
                
                // 在每个线路的站点后添加分隔线
                const separator = document.createElement('div');
                separator.style.borderBottom = '1px solid #eee';
                separator.style.margin = '12px 0';
                stationsList.appendChild(separator);
            });
        }

        // 显示车辆详情
        function showVehicleDetails(vehicle) {
            const modal = document.getElementById('vehicle-modal');
            const details = document.getElementById('vehicle-details');
            
            details.innerHTML = `
                <div style="display: flex; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #eee;">
                    <div style="flex-grow: 1;">
                        <h3 style="margin: 0; font-size: 20px;">${vehicle.license_plate}</h3>
                        <div style="color: #666;">${vehicle.brand} ${vehicle.model}</div>
                    </div>
                    <span class="status-badge ${vehicle.status === 1 ? 'status-active' : 'status-inactive'}" 
                          style="font-size: 14px; padding: 6px 12px;">
                        ${vehicle.status === 1 ? '运营中' : '停运'}
                    </span>
                </div>
                
                <div class="form-group">
                    <label>设备ID:</label>
                    <div class="form-control">${vehicle.device_id}</div>
                </div>
                
                <div class="form-group">
                    <label>VIN码:</label>
                    <div class="form-control" style="font-family: monospace;">${vehicle.vin_code}</div>
                </div>
                
                <div class="form-group">
                    <label>城市ID:</label>
                    <div class="form-control">${vehicle.city_id}</div>
                </div>
                
                <div class="form-group">
                    <label>级别ID:</label>
                    <div class="form-control">${vehicle.level_id}</div>
                </div>
                
                <div class="form-group">
                    <label>车型ID:</label>
                    <div class="form-control">${vehicle.model_id}</div>
                </div>
                
                <div class="form-group">
                    <label>当前位置:</label>
                    <div class="form-control">纬度: ${vehicle.latitude}, 经度: ${vehicle.longitude}</div>
                </div>
                
                <div class="form-group">
                    <label>最后更新时间:</label>
                    <div class="form-control">${vehicle.last_updated}</div>
                </div>
                
                <button class="btn btn-primary btn-block" onclick="centerMapOnVehicle(${vehicle.id})">在地图上居中显示</button>
            `;
            
            modal.style.display = 'block';
        }

        // 显示线路详情
        function showRouteDetails(route) {
            const modal = document.getElementById('vehicle-modal');
            const details = document.getElementById('vehicle-details');
            
            // 获取线路颜色
            const colors = ['#667eea', '#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4'];
            const routeColor = colors[(route.id - 1) % colors.length];
            
            details.innerHTML = `
                <div style="display: flex; align-items: center; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #eee;">
                    <div style="
                        width: 32px;
                        height: 32px;
                        border-radius: 50%;
                        background-color: ${routeColor};
                        margin-right: 12px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: white;
                        font-weight: bold;
                        font-size: 14px;
                        flex-shrink: 0;
                    ">${route.id}</div>
                    <div>
                        <h3 style="margin: 0; font-size: 20px;">${route.name}</h3>
                        <div style="color: #666;">线路代码: ${route.code}</div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label>起终点:</label>
                    <div class="form-control">${route.startPoint} → ${route.endPoint}</div>
                </div>
                
                <div class="form-group">
                    <label>线路标签:</label>
                    <div class="form-control">${route.tags}</div>
                </div>
                
                <div class="form-group">
                    <label>站点列表 (${route.stations.length}个站点):</label>
                    <div style="max-height: 200px; overflow-y: auto; border: 1px solid #ddd; border-radius: 5px; padding: 10px;">
                        ${route.stations.map((station, index) => `
                            <div style="display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid #f0f0f0;">
                                <div style="
                                    width: 20px;
                                    height: 20px;
                                    border-radius: 50%;
                                    background-color: ${routeColor};
                                    margin-right: 10px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    color: white;
                                    font-weight: bold;
                                    font-size: 11px;
                                    flex-shrink: 0;
                                ">${route.id}</div>
                                <div style="flex-grow: 1;">
                                    <div style="font-weight: bold;">${station.name}</div>
                                    <div style="font-size: 12px; color: #666;">第${index + 1}站</div>
                                </div>
                            </div>
                        `).join('')}
                    </div>
                </div>
                
                <div class="form-group">
                    <label>线路状态:</label>
                    <div class="form-control">${route.status === 1 ? '运营中' : '停运'}</div>
                </div>
                
                <button class="btn btn-primary btn-block" onclick="centerMapOnRoute(${route.id})">在地图上居中显示</button>
            `;
            
            modal.style.display = 'block';
        }

        // 在地图上高亮显示车辆
        function highlightVehicleOnMap(vehicleId) {
            // 移除之前所有车辆的高亮样式
            Object.values(markers).forEach(marker => {
                marker.setIcon(L.icon({
                    iconUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png',
                    iconSize: [25, 41],
                    iconAnchor: [12, 41]
                }));
            });
            
            // 如果该车辆有标记，则高亮显示
            if (markers[vehicleId]) {
                markers[vehicleId].setIcon(L.icon({
                    iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png',
                    iconSize: [25, 41],
                    iconAnchor: [12, 41]
                }));
            }
        }

        // 居中显示车辆在地图上
        function centerMapOnVehicle(vehicleId) {
            const vehicle = mockVehicles.find(v => v.id === vehicleId);
            if (vehicle) {
                map.setView([vehicle.latitude, vehicle.longitude], 15);
                highlightVehicleOnMap(vehicleId);
                
                // 关闭模态框
                document.getElementById('vehicle-modal').style.display = 'none';
            }
        }

        // 模态框关闭功能
        document.querySelectorAll('.close').forEach(closeBtn => {
            closeBtn.addEventListener('click', () => {
                closeBtn.closest('.modal').style.display = 'none';
            });
        });

        // 点击模态框外部关闭
        window.addEventListener('click', (event) => {
            if (event.target.classList.contains('modal')) {
                event.target.style.display = 'none';
            }
        });

        // 初始化页面
        renderVehicles(mockVehicles);
        renderRoutes(mockRoutes);
        renderStations();
        renderRouteLegend();

        // 标签页切换功能
        document.querySelectorAll('.tab').forEach(tab => {
            tab.addEventListener('click', () => {
                // 移除所有活动状态
                document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
                document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
                
                // 添加当前标签的活动状态
                tab.classList.add('active');
                const tabId = tab.getAttribute('data-tab');
                document.getElementById(`${tabId}-tab`).classList.add('active');
            });
        });

        // 图例折叠功能
        document.getElementById('toggle-legend').addEventListener('click', function() {
            const legendContent = document.getElementById('legend-content');
            const toggleButton = document.getElementById('toggle-legend');
            
            if (legendContent.style.display === 'none') {
                legendContent.style.display = 'block';
                toggleButton.textContent = '−';
            } else {
                legendContent.style.display = 'none';
                toggleButton.textContent = '+';
            }
        });

        // 生成线路图例
        function renderRouteLegend() {
            const legendContent = document.getElementById('legend-content');
            const colors = ['#667eea', '#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4'];
            
            legendContent.innerHTML = '';
            
            mockRoutes.forEach(route => {
                const routeColor = colors[(route.id - 1) % colors.length];
                const legendItem = document.createElement('div');
                legendItem.style.display = 'flex';
                legendItem.style.alignItems = 'center';
                legendItem.style.marginBottom = '8px';
                legendItem.style.padding = '6px';
                legendItem.style.borderRadius = '6px';
                legendItem.style.transition = 'background-color 0.2s';
                
                // 添加悬停效果
                legendItem.addEventListener('mouseenter', () => {
                    legendItem.style.backgroundColor = '#f8f9fa';
                });
                legendItem.addEventListener('mouseleave', () => {
                    legendItem.style.backgroundColor = 'transparent';
                });
                
                legendItem.innerHTML = `
                    <div style="
                        width: 24px;
                        height: 24px;
                        border-radius: 50%;
                        background-color: ${routeColor};
                        margin-right: 10px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: white;
                        font-weight: bold;
                        font-size: 12px;
                        flex-shrink: 0;
                    ">${route.id}</div>
                    <div style="display: flex; flex-direction: column; flex-grow: 1;">
                        <div style="font-weight: bold; font-size: 14px;">${route.name}</div>
                        <div style="font-size: 12px; color: #666;">${route.code} • ${route.stations.length}个站点</div>
                    </div>
                `;
                
                // 点击图例项时高亮对应线路
                legendItem.addEventListener('click', () => {
                    highlightRouteOnMap(route.id);
                    centerMapOnRoute(route.id);
                });
                
                legendContent.appendChild(legendItem);
            });
        }

        // 搜索功能
        document.getElementById('vehicle-search').addEventListener('input', (e) => {
            const term = e.target.value.toLowerCase();
            const filteredVehicles = mockVehicles.filter(vehicle => 
                vehicle.license_plate.toLowerCase().includes(term) || 
                vehicle.brand.toLowerCase().includes(term) ||
                vehicle.model.toLowerCase().includes(term)
            );
            renderVehicles(filteredVehicles);
        });

        document.getElementById('route-search').addEventListener('input', (e) => {
            const term = e.target.value.toLowerCase();
            const filteredRoutes = mockRoutes.filter(route => 
                route.name.toLowerCase().includes(term) || 
                route.code.toLowerCase().includes(term) ||
                route.tags.toLowerCase().includes(term)
            );
            renderRoutes(filteredRoutes);
        });

        document.getElementById('station-search').addEventListener('input', (e) => {
            const term = e.target.value.toLowerCase();
            const filteredStations = [];
            
            // 定义线路颜色
            const colors = ['#667eea', '#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4'];
            
            // 遍历所有线路的站点，筛选符合条件的站点
            mockRoutes.forEach(route => {
                const routeColor = colors[(route.id - 1) % colors.length];
                route.stations.forEach((station, index) => {
                    if (station.name.toLowerCase().includes(term) || 
                        route.name.toLowerCase().includes(term)) {
                        filteredStations.push({
                            station: station,
                            route: route,
                            color: routeColor,
                            index: index
                        });
                    }
                });
            });
            
            // 更新站点列表显示
            const stationsList = document.getElementById('stations-list');
            stationsList.innerHTML = '';
            
            // 按线路分组显示
            const groupedStations = {};
            filteredStations.forEach(item => {
                if (!groupedStations[item.route.id]) {
                    groupedStations[item.route.id] = {
                        route: item.route,
                        color: item.color,
                        stations: []
                    };
                }
                groupedStations[item.route.id].stations.push(item);
            });
            
            // 显示分组结果
            Object.values(groupedStations).forEach(group => {
                // 添加线路标题
                const routeHeader = document.createElement('div');
                routeHeader.className = 'route-header';
                routeHeader.innerHTML = `
                    <div style="
                        display: flex;
                        align-items: center;
                        padding: 8px 12px;
                        background: #f8f9fa;
                        border-radius: 6px;
                        margin-bottom: 8px;
                        font-weight: bold;
                        color: #444;
                    ">
                        <div style="
                            width: 20px;
                            height: 20px;
                            border-radius: 50%;
                            background-color: ${group.color};
                            margin-right: 8px;
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            color: white;
                            font-weight: bold;
                            font-size: 11px;
                            flex-shrink: 0;
                        ">${group.route.id}</div>
                        ${group.route.name}
                    </div>
                `;
                stationsList.appendChild(routeHeader);
                
                // 添加站点
                group.stations.forEach(item => {
                    const stationElement = document.createElement('div');
                    stationElement.className = 'list-group-item';
                    stationElement.innerHTML = `
                        <div style="display: flex; align-items: center; justify-content: space-between;">
                            <div style="display: flex; align-items: center;">
                                <div style="
                                    width: 20px;
                                    height: 20px;
                                    border-radius: 50%;
                                    background-color: ${item.color};
                                    margin-right: 10px;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    color: white;
                                    font-weight: bold;
                                    font-size: 11px;
                                    flex-shrink: 0;
                                ">${item.route.id}</div>
                                <div>
                                    <div style="font-weight: bold;">${item.station.name}</div>
                                    <div style="font-size: 12px; color: #666;">第${item.index + 1}站</div>
                                </div>
                            </div>
                            <div style="font-size: 12px; background: #e9ecef; padding: 2px 6px; border-radius: 4px;">
                                ${item.route.code}
                            </div>
                        </div>
                    `;
                    
                    stationElement.addEventListener('click', () => {
                        // 居中显示站点位置
                        map.setView([item.station.lat, item.station.lng], 15);
                        
                        // 高亮显示对应的线路
                        highlightRouteOnMap(item.route.id);
                    });
                    stationsList.appendChild(stationElement);
                });
                
                // 添加分隔线
                const separator = document.createElement('div');
                separator.style.borderBottom = '1px solid #eee';
                separator.style.margin = '12px 0';
                stationsList.appendChild(separator);
            });
        });

        // 在地图上添加车辆标记
        mockVehicles.forEach(vehicle => {
            if (vehicle.latitude && vehicle.longitude) {
                const marker = L.marker([vehicle.latitude, vehicle.longitude]).addTo(map);
                marker.bindPopup(`
                    <b>${vehicle.license_plate}</b><br>
                    ${vehicle.brand} ${vehicle.model}<br>
                    状态: ${vehicle.status === 1 ? '运营中' : '停运'}<br>
                    <button onclick="centerMapOnVehicle(${vehicle.id})">查看详情</button>
                `);
                
                // 将标记存储到对象中以便后续操作
                markers[vehicle.id] = marker;
                
                // 添加点击事件，点击标记时高亮显示并显示详情
                marker.on('click', () => {
                    highlightVehicleOnMap(vehicle.id);
                    // 高亮对应的列表项
                    document.querySelectorAll('.list-group-item').forEach(item => {
                        item.classList.remove('active');
                        if (parseInt(item.getAttribute('data-vehicle-id')) === vehicle.id) {
                            item.classList.add('active');
                        }
                    });
                });
            }
        });

        // 在地图上添加线路
        mockRoutes.forEach(route => {
            // 为不同线路设置不同颜色
            const colors = ['#667eea', '#ff6b6b', '#4ecdc4', '#45b7d1', '#96ceb4'];
            const routeColor = colors[(route.id - 1) % colors.length];
            
            // 存储线路颜色
            routeColors[route.id] = routeColor;
            
            // 添加线路
            const points = route.stations.map(station => [station.lat, station.lng]);
            const polyline = L.polyline(points, {color: routeColor, weight: 5}).addTo(map);
            
            // 添加站点标记和标签
            route.stations.forEach((station, index) => {
                // 添加站点标记
                const marker = L.marker([station.lat, station.lng]).addTo(map);
                marker.bindPopup(`<b>${station.name}</b><br>线路: ${route.name}<br>第${index + 1}站`);
                
                // 添加站点名称标签
                const label = L.marker([station.lat, station.lng], {
                    icon: L.divIcon({
                        className: 'station-label',
                        html: `<div style="
                            background: rgba(255, 255, 255, 0.9); 
                            padding: 4px 8px; 
                            border-radius: 12px; 
                            font-weight: bold; 
                            font-size: 12px;
                            text-align: center;
                            border: 2px solid ${routeColor};
                            box-shadow: 0 2px 6px rgba(0,0,0,0.3);
                            color: #333;
                            white-space: nowrap;
                            margin-top: -30px;
                            margin-left: 15px;">${station.name}</div>`,
                        iconSize: [null, null]
                    })
                }).addTo(map);
            });
            
            // 为线路添加编号标识（在线路起点附近）
            if (route.stations.length > 0) {
                const firstStation = route.stations[0];
                // 微调位置以避免与站点标签重叠
                const labelLat = firstStation.lat + 0.001;
                const labelLng = firstStation.lng + 0.001;
                
                const routeLabel = L.marker([labelLat, labelLng], {
                    icon: L.divIcon({
                        className: 'route-number-label',
                        html: `<div style="
                            background: ${routeColor};
                            color: white;
                            padding: 4px 8px;
                            border-radius: 50%;
                            font-weight: bold;
                            font-size: 12px;
                            text-align: center;
                            box-shadow: 0 2px 6px rgba(0,0,0,0.3);
                            width: 24px;
                            height: 24px;
                            line-height: 16px;
                            border: 2px solid white;
                            display: flex;
                            align-items: center;
                            justify-content: center;">${route.id}</div>`,
                        iconSize: [24, 24],
                        iconAnchor: [12, 12]
                    })
                }).addTo(map);
                
                routeLabel.bindPopup(`<b>${route.name}</b><br>线路编号: ${route.id}<br>线路代码: ${route.code}`);
            }
            
            // 将线路图层存储到对象中以便后续操作
            routeLayers[route.id] = polyline;
        });

        // 点击列表项时在地图上高亮显示车辆
        document.getElementById('vehicles-list').addEventListener('click', (e) => {
            const vehicleItem = e.target.closest('.list-group-item');
            if (vehicleItem) {
                // 移除之前选中项的高亮
                document.querySelectorAll('.list-group-item').forEach(item => {
                    item.classList.remove('active');
                });
                
                // 添加当前选中项的高亮
                vehicleItem.classList.add('active');
                
                // 获取车辆ID并高亮地图上的标记
                const vehicleId = parseInt(vehicleItem.getAttribute('data-vehicle-id'));
                highlightVehicleOnMap(vehicleId);
            }
        });

        // 在地图上高亮显示线路
        function highlightRouteOnMap(routeId) {
            // 移除之前所有线路的高亮样式
            Object.values(routeLayers).forEach(layer => {
                layer.setStyle({weight: 5});
            });
            
            // 如果该线路存在，则高亮显示（加粗线条）
            if (routeLayers[routeId]) {
                routeLayers[routeId].setStyle({weight: 8});
            }
        }

        // 居中显示线路在地图上
        function centerMapOnRoute(routeId) {
            const route = mockRoutes.find(r => r.id === routeId);
            if (route && route.stations.length > 0) {
                // 计算线路的边界
                const bounds = L.latLngBounds(route.stations.map(s => [s.lat, s.lng]));
                map.fitBounds(bounds, {padding: [50, 50]});
                highlightRouteOnMap(routeId);
                
                // 关闭模态框
                document.getElementById('vehicle-modal').style.display = 'none';
            }
        }
    </script>
</body>
</html>